<script>
export default {
  name: "lifeCycle",
  data() {
    return {
      msg:'hello',
      value:''
    }
  },

  beforeCreate() {
    console.log('beforeCreate')
    console.log(this.msg)
  },

  created() {
    console.log('created')
    console.log(this.msg)
    this.msg = 'hi'
  },

  mounted() {
    console.log('mounted')
    document.getElementById('box').style.color = 'red'
  },

  beforeUpdate() {
    console.log('beforeUpdate')
  },

  updated() {
    console.log('updated')
  },

  beforeDestroy() {
    console.log('beforeDestroy')
  },

  destroyed() {
    console.log('destroyed')
  }
}
</script>

<template>
<div>
{{msg}}
  <div id="box">color</div>
  <input type="text" v-model="value">
  <router-link to="/about"></router-link>
</div>
</template>

<style scoped lang="less">

</style>